<template>
  <div>
    <a-card :bordered="false" style="position: relative; margin-bottom: 10px" >
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item mode_item_flex">
            <div class="mode_item_div">
              <a-form-model-item label="立案时间">
                <!-- <a-range-picker
                  :allowClear="true"
                  v-model="rangePickerTime"
                  valueFormat="YYYY-MM-DD"
                  @change="rangePickerChange"
                  style="margin-left: 10px"
                /> -->
                <span class="date-range-picker">
                  <a-date-picker
                    v-model="form.listWarehousingStartTime"
                    placeholder="开始日期"
                    :disabled-date="disabledStartDate"
                    valueFormat="YYYY-MM-DD"
                    @openChange="handleOpenChange($event, 'start')"
                  />
                  <span class="line">-</span>
                  <a-date-picker
                    v-model="form.listWarehousingEndTime"
                    placeholder="结束日期"
                    :disabled-date="disabledEndDate"
                    valueFormat="YYYY-MM-DD"
                    :open="endOpen"
                    @openChange="handleOpenChange($event, 'end')"
                  />
                </span>
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="案件编号">
                <a-input v-model="form.theCaseNumber" placeholder="请输入" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="案件名称">
                <j-input v-model="form.caseName" placeholder="请输入" />
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="诈骗类型">
                <j-dict-select-tag v-model="form.fraudType" :custOption="[{value: undefined, text: '全部'}]" placeholder="请选择" dictCode="case_fraud_type" />
              </a-form-model-item>
            </div>
          </div>
          <div class="mode_item mode_item_flex">
            <div class="mode_item_div">
              <a-form-model-item label="删除时间">
                <span class="date-range-picker">
                  <a-date-picker
                    v-model="form.listDeleteStartTime"
                    placeholder="开始日期"
                    :disabled-date="disabledDeleteStartDate"
                    valueFormat="YYYY-MM-DD"
                    @openChange="handleOpenChangeDelete($event, 'start')"
                  />
                  <span class="line">-</span>
                  <a-date-picker
                    v-model="form.listDeleteEndTime"
                    placeholder="结束日期"
                    :disabled-date="disabledDeleteEndDate"
                    valueFormat="YYYY-MM-DD"
                    :open="endOpenDelete"
                    @openChange="handleOpenChangeDelete($event, 'end')"
                  />
                </span>
                <!-- <a-range-picker
                  :allowClear="true"
                  v-model="rangePickerTime1"
                  valueFormat="YYYY-MM-DD"
                  @change="rangePickerChange1"
                  style="margin-left: 10px"
                /> -->
              </a-form-model-item>
            </div>
            <div class="mode_item_div">
              <a-form-model-item label="受害人">
                <j-input v-model="form.nameOfVictim" placeholder="请输入" />
              </a-form-model-item>
            </div>
          </div>
          <div style="width: 36%; margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button type="primary" @click="handleModal()" :disabled="isDisabled">恢复</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="id"
          :showColSettings="false"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRowKey="onSelectedRow"
          @change="onTableChange"
        >
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="handleDetails(record)" type="link" style="padding: 0 5px;">详情</a-button>
            <a-button v-has="'item_case_deleteList:recover'" @click="handleBatch(record)" type="link" style="padding: 0 5px;">恢复</a-button>
          </template>
        </z-table>
      </div>
    </a-card>
    <details-modal ref="detailsModal" />
  </div>
</template>

<script>
import moment from 'moment'
import {getDictItemsFromCache} from '@/api/api'
import * as caseApi from '@/api/modules/case.js'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import detailsModal from './modules/detailsModal'

export default {
  components: {
    detailsModal
  },
  mixins: [DisabledAuthFilterMixin],
  data() {
    return {
      moment,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      rangePickerTime: [],
      rangePickerTime1: [],
      endOpen: false,
      endOpenDelete: false,
      loading: false,
      isDisabled: true,
      selectKeys: [],
      columns: [
        {
          title: "序号",
          dataIndex: "order",
          width: 60,
          align: "center",
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize +
              (index + 1)}` //序号分页后连续
        },
        {
          title: "案件编号",
          dataIndex: 'theCaseNumber',
          width: 120,
          align: "center",
          customRender: (text)=>{
            return <j-ellipsis value={text} length={12} />
          }
        },
        {
          title: "案件名称",
          dataIndex: 'caseName',
          align: "center",
          width: 100,
          customRender: (text)=>{
            return <j-ellipsis value={text} length={10} />
          }
        },
        {
          title: "诈骗类型",
          dataIndex: 'fraudType',
          align: "center",
          width: 100,
          customRender: (text) => {
            return <j-ellipsis value={this.filterMultiDictText('case_fraud_type', text)} length={8} />
          }
        },
        {
          title: '受害人姓名',
          dataIndex: 'nameOfVictim',
          align: "center",
          width: 85,
        },
        {
          title: '损失人民币',
          dataIndex: 'lossOfRmb',
          align: "center",
          width: 90
        },
        {
          title: "案件状态",
          dataIndex: 'caseStatus',
          align: "center",
          width: 90,
          customRender: (text) => {
            return this.filterMultiDictText('state_of_the_case', text)
          }
        },
        {
          title: "作案工具",
          dataIndex: 'crimeTools',
          align: "center",
          width: 90,
          customRender: (text) => {
            return this.filterMultiDictText('a_trebuchet', text)
          }
        },
        {
          title: "立案时间",
          dataIndex: 'caseOfTime',
          align: "center",
          width: 140,
          // customRender: (text, record) => {
          //   if(record.warehousingStartTime && record.warehousingEndTime) {
          //     return <span>{record.warehousingStartTime}-{record.warehousingEndTime}</span>
          //   } else {
          //     return <span>--</span>
          //   }
          // }
        },
        {
          title: "删除时间",
          dataIndex: 'deleteTime',
          align: "center",
          width: 140
        },
        {
          title: "录入时间",
          dataIndex: 'createTime',
          align: "center",
          width: 140,
        },
        {
          title: '操作',
          width: 110,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      form: {},
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {}
    }
  },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.rangePickerTime = []
      this.rangePickerTime1 = []
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true;
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = {currentPage: 'pageNo'}
      let paginations= Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations);
      this.refreshTable();
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      caseApi.getCaseDeletelist(form).then((res) => {
        if (res.success) {
          this.pageData = res.result
          this.loading = false
          this.$refs.table.onClearRowKeys()
        } else {
          this.loading = false
        }
      }).catch(e=>{
        this.loading = false
        this.$message.warn("请求失败！");
      })
    },
    // 立案时间
    rangePickerChange(date) {
      this.$set( this.form, 'listWarehousingStartTime', date[0] )
      this.$set( this.form, 'listWarehousingEndTime', date[1] )
    },
    // 删除时间
    rangePickerChange1(date) {
      this.$set( this.form, 'listDeleteStartTime', date[0] )
      this.$set( this.form, 'listDeleteEndTime', date[1] )
    },
    handleModal() {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      let ids = selectList.map(v=>v.id).toString()
      this.$confirm({
        title: '确定恢复案件记录？',
        okType: 'danger',
        onOk() {
          caseApi.deleteBatch({ids: ids}).then((res) => {
            if (res.success) {
              that.$message.success(res.result)
              that.refreshTable()
            } else {
              that.$message.error(res.message)
            }
          })
          .catch((e) => {
            that.$message.error('恢复出错了')
          })
        }
      })
    },
    // 详情
    handleDetails(record) {
      this.$refs.detailsModal.handle(record)
      this.$refs.detailsModal.disableSubmit = true
    },
    // 恢复
    handleBatch(record) {
      let that = this
      this.$confirm({
        title: '确定恢复该条案件记录？',
        okType: 'danger',
        onOk() {
          caseApi.deleteBatchId({id: record.id}).then((res) => {
            if (res.success) {
              that.$message.success(res.result)
              that.refreshTable()
            } else {
              that.$message.error(res.message)
            }
          })
          .catch((e) => {
            that.$message.error('恢复出错了')
          })
        }
      })
    },
    filterDictText(dictCode, text) {
      return this.$filterDictTextByCache(dictCode, text)
    },
    filterMultiDictText(dictCode, text) {
      if(!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    // 立案时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.form).length > 0 && this.form.listWarehousingEndTime
        ? this.$JMoment(this.form.listWarehousingEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 立案时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.form).length > 0 && this.form.listWarehousingStartTime
      ? this.$JMoment(this.form.listWarehousingStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 立案时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    },
    // 删除时间-自定义开始日期【不可选择的日期】
    disabledDeleteStartDate(startValue) {
      const endValue = Object.keys(this.form).length > 0 && this.form.listDeleteEndTime
        ? this.$JMoment(this.form.listDeleteEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 删除时间-自定义结束日期【不可选择的日期】
    disabledDeleteEndDate(endValue) {
      const startValue = Object.keys(this.form).length > 0 && this.form.listDeleteStartTime
      ? this.$JMoment(this.form.listDeleteStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 删除时间-自定义日期【控制弹层是否展开】
    handleOpenChangeDelete(open, status) {
      if (status==='start' && !open) {
        this.endOpenDelete = true
      }
      if (status==='end') {
        this.endOpenDelete = open
      }
    }
  }
}
</script>
<style lang="less" scoped>
.form-item-label {
  /deep/.ant-form-item-label {
    width: 80px;
  }
}
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  .mode_item_div {
    width: 25%;
    padding: 5px 0;
    .ant-form-item {
      margin-bottom: 0;
    }
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 100;
}
/deep/.table-operator {
  display: flex;
  justify-content: space-between;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
/deep/.ant-dropdown-menu-item {
  text-align: center;
  border-bottom: 1px #f5f5f5 solid;
  &:last-child {
    border-bottom: 0;
  }
}
/deep/.anticon.anticon-down {
  font-size: 14px !important;
}

.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child
  {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #02a7f0;
    padding-right: 6px;
  }
  .text_color_2 {
    color: #f59a23;
    padding-right: 6px;
  }
  .text_color_3 {
    color: #d9001b;
    padding-right: 6px;
  }
  .ant-tag-cust-green {
    background-color: #f2fee6;
    border-color: #c2fa90;
  }
  .ant-tag.ant-tag-level {
    display: block;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 0;
    &.level_1 {
      color: #3fb674;
      background-color: #e4fff0;
    }
    &.level_2 {
      color: #56acf2;
      background-color: #dceefd;
    }
    &.level_3 {
      color: #f9b01e;
      background-color: #fef3dc;
    }
    &.level_4 {
      color: #fd586c;
      background-color: #ffe9e7;
    }
    &.level_5 {
      color: #b40aba;
      background-color: #fecdff;
    }
  }
}
.date-range-picker {
  // width: 280px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>
